<template>
	<view>
		<!-- <view class="link_navbar">
			<u-navbar class="unavbar" title="邀请好友" z-index="200" :border-bottom="false" title-color="#fff"
				:custom-back="navBack" back-icon-color="#fff" :is-back="true"
				:background="{background:'rgba(0,0,0,0)'}">
			</u-navbar>
		</view> -->
		<!-- <image src="http://www.aiyoukejiwangluo.cn/Upload/2024/0804/202408042044134805.png" style="width: 100%;height:1624rpx;position: fixed;"></image> -->
		<view class="content2" style="height:95vh;">
			<l-painter :board="base" is-canvas-to-temp-file-path custom-style="position:absolute;z-index: 100;margin-left: 32rpx;margin-top: 50rpx;"
				@success="huizhitupian" v-if="huihuabool" />

			<view v-for="(item,index) in swiperlist" :key="index" style="width: 686rpx;z-index: 100;margin-left: 32rpx;margin-top: 50rpx;">
				<image :src="item.image" mode="widthFix" style="width: 100%;height: 100%;border-radius: 32rpx 32rpx 32rpx 32rpx;"></image>
			</view>

			<view class="submitBottom">
				<view class="ljfx flexcenter" style="width: 686rpx;margin-left: 32rpx;" @click="bcphoto">保存图片到相册</view>
			</view>


		</view>
		<!-- <movablearea1 movaheight="72vh"></movablearea1> -->

	</view>
</template>

<script>
	// import {
	// 	myInvitationCode
	// } from "@/api/user.js"

	// import {
	// 	movablearea1
	// } from '@/components/movablearea1/movablearea1.vue'
	export default {
		name: "invite",
		components: {
			// movablearea1
		},
		data() {
			return {
				swiper: 0,
				autoplay: false,
				interval: 2000,
				duration: 500,
				haibao: [],
				base: {
					css: {
						width: '686rpx',
						height: '1042rpx',
						background: '#fff',
						position: 'relative',
						borderRadius:'32rpx',
					},
					views: [
						{
							type: 'image',
							src: 'background.png',
							css: {
								objectFit: 'fill',
								// left: '16rpx',
								// top: '16rpx',
								width: '686rpx',
								height: '800rpx',
								position: 'absolute'
							}
						},
						// {
						// 	type: 'image',
						// 	src: 'touxiang.png',
						// 	css: {
						// 		objectFit: 'fill',
						// 		left: '16rpx',
						// 		top: '918rpx',
						// 		width: '98rpx',
						// 		height: '98rpx',
						// 		radius: '50%',
						// 		background: 'transparent',
						// 		position: 'absolute'
						// 	}
						// },
						
						// {
						// 	type: 'text',
						// 	text: '微信扫一扫 使用小程序',
						// 	css: {
						// 		color: '#000',
						// 		left: '147rpx',
						// 		top: '980rpx',
						// 		fontSize: '24rpx',
						// 		position: 'absolute'
						// 	}
						// },
						{
							type: 'image',
							src: 'erweima.png',
							css: {
								objectFit: 'fill',
								background: 'transparent',
								left: '136rpx',
								top: '401rpx',
								width: '415rpx',
								height: '415rpx',
								position: 'absolute'
							}
						},
						{
							type: 'text',
							text: '张三的会议',
							css: {
								color: '#15181D',
								// left: '172rpx',
								top: '50rpx',
								width:'686rpx',
								fontSize: '38rpx',
								fontWeight: '500',
								verticalAlign: 'center',
								position: 'absolute',
								textAlign: 'center'
							}
						},
						{
							type: 'text',
							text: '220 325 456',
							css: {
								color: '#15181D',
								// left: '172rpx',
								top: '108rpx',
								width:'686rpx',
								fontSize: '26rpx',
								fontWeight: '400',
								verticalAlign: 'center',
								position: 'absolute',
								textAlign: 'center'
							}
						},
						{
							type: 'text',
							text: '09:00',
							css: {
								color: '#000000',
								left: '50rpx',
								top: '186rpx',
								fontSize: '59rpx',
								fontWeight: '700',
								position: 'absolute',
							}
						},
						{
							type: 'text',
							text: '2024年08月05日',
							css: {
								color: '#000000',
								left: '32rpx',
								top: '270rpx',
								fontSize: '26rpx',
								fontWeight: '400',
								position: 'absolute',
							}
						},
						{
							type: 'text',
							text: '1.5小时',
							css: {
								color: '#0052D9',
								width:'104rpx',
								height:'49rpx',
								left: '291rpx',
								top: '191rpx',
								fontSize: '26rpx',
								fontWeight: '400',
								position: 'absolute',
								background: '#F2F3FF',
								textAlign: 'center'
							}
						},
						{
							type: 'text',
							text: '10:30',
							css: {
								color: '#000000',
								left: '479rpx',
								top: '186rpx',
								fontSize: '59rpx',
								fontWeight: '700',
								position: 'absolute',
							}
						},
						{
							type: 'text',
							text: '2024年08月05日',
							css: {
								color: '#000000',
								left: '461rpx',
								top: '270rpx',
								fontSize: '26rpx',
								fontWeight: '400',
								position: 'absolute',
							}
						},
						{
							type: 'view',
							text: ' ',
							css: {
								width:'622rpx',
								height:'1rpx',
								left: '32rpx',
								top: '334rpx',
								position: 'absolute',
								background: '#707070',
							}
						},
						{
							type: 'text',
							text: '保存二维码扫码入会',
							css: {
								color: '#333333',
								left: '226rpx',
								top: '842rpx',
								fontSize: '26rpx',
								fontWeight: '400',
								position: 'absolute',
								
							}
						},
						{
							type: 'view',
							text: ' ',
							css: {
								width:'64rpx',
								height:'1rpx',
								left: '193rpx',
								top: '966rpx',
								position: 'absolute',
								background: '#0052D9',
							}
						},
						{
							type: 'text',
							text: '鼎智logo',
							css: {
								color: '#0052D9',
								left: '269rpx',
								top: '944rpx',
								fontSize: '37rpx',
								fontWeight: '400',
								position: 'absolute',
								// width:'686rpx',
								// textAlign: 'center'
							}
						},
						{
							type: 'view',
							text: ' ',
							css: {
								width:'64rpx',
								height:'1rpx',
								left: '440rpx',
								top: '966rpx',
								position: 'absolute',
								background: '#0052D9',
							}
						},
					]

				},
				swiperlist: [],
				swiperlist2: [],
				swiperht: 0,
				huihuabool: false,
				current: 1,
				baocuntp: 0,
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				InvitePostersQuery: {
					page: 1,
					limit: 10
				},
				userName: '',
				userInviteCode: '',
				userAvatar: '',

				userInfo: {},
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.LoadInvitePostersList()
		},
		methods: {
			async LoadInvitePostersList() {
				// const res = await myInvitationCode()
					// this.base.views[2].text = '王小明'
					// this.base.views[1].src = "data:image/png;base64," + res.data
					this.base.views[1].src = 'https://www.wn-wh.cn/WImages/yaoqinghaoyoubg.png'
					this.fortupian()
				// if (res.code == 200) {
				// 	this.base.views[2].text = this.userInfo.UserName
				// 	this.base.views[1].src = this.userInfo.Avatar
				// 	this.base.views[4].src = res.data
				// 	this.fortupian()
				// } else {
				// 	this.base.views[2].text = this.userInfo.UserName
				// 	this.base.views[1].src = this.userInfo.Avatar
				// 	this.base.views[4].src = this.userInfo.Avatar
				// 	this.fortupian()
				// }
			},
			selecthb(index) {
				this.current = 1
				this.baocuntp = index
				uni.showLoading({
					title: '绘制海报中...'
				})
			},
			fortupian() {
				// this.base.views[0].src = this.fwqUrl + 'yaoqinghaoyouhaibao.png'
				// this.base.views[0].src = 'https://luosai2.oss-cn-guangzhou.aliyuncs.com/Upload/2024/0904/202409041631403442.png'
				this.huihuabool = true
				console.log(this.base,'this.huihuabool',this.huihuabool)
			},
			huizhitupian(img) {
				console.log(1)
				console.log(img)
				uni.hideLoading()
				this.swiperlist.push({
					image: img
				})
				this.swiperlist2.push(img)
				console.log(this.swiperlist, this.swiperlist2)
				this.huihuabool = false
				this.swiperht++
				if (this.haibao.length > this.swiperht) {
					this.fortupian()
				}
			},
			swiperclick() {
				uni.previewImage({
					current: this.swiper,
					urls: this.swiperlist2,
				})
			},
			changeswiper(e) {
				this.baocuntp = e.detail.current;
				this.swiper = e.detail.current;
			},
			bcphoto() {
				uni.saveImageToPhotosAlbum({
					filePath: this.swiperlist2[this.baocuntp],
					success: function(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
					}
				});
			},
			goback() {
				if (this.current == 1) {
					this.current = 0
				}
				if (this.current == 0) {
					uni.navigateBack({
						delta: 1,
					})
				}
			}
		}
	}
</script>

<style lang="less">
	page>view{
		background: #F3F4F6;
	}
	.submitBottom {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		.bctp {
			margin-left: 64rpx;
			width: 300rpx;
			height: 89rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #0052D9;
			font-weight: normal;
			font-size: 32rpx;
			color: #0052D9;
		}

		.ljfx {
			// width: 331rpx;
			// border-radius: 44rpx;
			// line-height: 68rpx;
			// font-size: 28rpx;
			// text-align: center;
			// background-color: #F8B62C;
			margin-right: 64rpx;
			width: 300rpx;
			height: 89rpx;
			background: #0052D9;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-weight: normal;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>
<style>
	.swiper {

		height: 1334rpx;

	}

	.swiper-item {
		font-size: 28rpx;
		display: flex;
		justify-content: center;
	}

	.swiper-itemto {
		width: 686rpx;
		border-radius: 32rpx;
	}

	.swiper-itemto .name {
		font-size: 30rpx;
		color: #000;
		margin-bottom: 10rpx;
	}

	.swiper-itemto .shuoming {
		font-size: 26rpx;
		color: #666;
		line-height: 42rpx;
	}

	.on {
		transition: all 0.3s;
	}

	.noon {
		transform: scale(0.9);
		transition: all 0.3s;
	}

	.link_navbar {
		position: fixed;
		z-index: 101;
	}

	page {
		background: #F3F4F6;
	}

	.content2 {
		background: #F3F4F6;
		/* padding-bottom: calc( 120rpx + env(safe-area-inset-bottom) ); */
	}



	.swiperitem {
		height: 100%;

		/* padding: 0 32rpx; */
		box-sizing: border-box;
	}

	.swiperitem:first-child {
		padding: 0 32rpx 0 0;
	}

	.swiperitem:last-child {
		padding: 0 0 0 32rpx;
	}

	.content {
		background: #f8f8f8;

	}

	.content>.allwrap {
		padding-top: 32rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.content .cssstyle {
		padding: 0 0 0 16rpx;
		width: 50%;
	}

	.content .cssstyle:nth-child(2n-1) {
		padding: 0 16rpx 0 0;

	}

	.content .haibao {
		position: relative;
	}



	.content .haibao .user {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 48rpx;
		left: 16rpx;
	}

	.content .haibao .user .imageto {
		width: 18rpx;
		height: 18rpx;
		margin-right: 8rpx;
		border-radius: 50%;
	}

	.content .haibao .user .nameto {
		font-size: 12rpx;
		color: #000;
	}

	.content .haibao .erweima {
		width: 52rpx;
		position: absolute;
		right: 16rpx;
		bottom: 18rpx
	}

	.content .cssstyle .style {
		font-size: 30rpx;
		color: #000000;
		line-height: 60rpx;
		margin-bottom: 16rpx;
		text-align: center;
	}
</style>